<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>弹出框</title>
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<style>
			body {
				margin: 0;
				padding: 0;
				font-size: 16px;
			}
			.dialog {
				display: none;
				background: rgba(0, 0, 0, 0.8) !important;
				background: #000;
				filter: alpha(opacity=80);
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99;
				overflow: hidden;
			}
			.dialog-content {
				width: 80%;
				max-width: 540px;
				height: auto;
				max-height: 70%;
				overflow-y: auto;
				background: #fff;
				position: absolute;
				margin: auto;
				padding: 15px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 5px;
			}
			.dialog-content h2 {
				font-size: 1.25rem;
				color: #333333;
				letter-spacing: 0.04px;
				font-weight: normal;
				text-align: center;
			}
			.dialog-body {
				margin: 0 auto;
				max-width: 500px;
				
			}
			.btn {
				background: #EA2A0B;
				border-radius: 5px;
				display: block;
				border: none;
				margin: 0 auto;
				width: -webkit-calc(100% - 40px);
				width: calc(100% - 40px);
				font-size: 1.125rem;
				color: #FFFFFF;
				letter-spacing: 0.04px;
				line-height: 1.5rem;
				padding: 9px 0;
				max-width: 500px;
				outline: none;
				margin-top: 15px;
			}
			#btn {
				margin: 20% auto;
			}
		</style>
		<script>
			$(function() {
				$("#btn").click(function() {
					$(".dialog").fadeIn(200);

				});
				$(".close").click(function() {

					$(".dialog").fadeOut(200);
				})

			})
		</script>
	</head>

	<body>
		<input type="button" class="btn" value="弹出窗口" id="btn" />

		<div class="dialog">
			<div class="dialog-content">
				<h2>标题</h2>
				<div class="dialog-body">
					弹出层内容
				</div>
				<input type="button" class="btn close" name="" id="" value="关闭" />
			</div>
		</div>

	</body>

</html>